<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-29 09:27:22
 * @LastEditors: your name
 * @LastEditTime: 2021-04-29 15:33:32
 * @Description: file content
-->
<template>
  <div class="content">
    <slot />

    <el-tag
      class="name-tag"
      size="medium"
      closable
      v-for="item in groupList"
      :key="item.id"
      type="info"
      @close="handleDelete(item.id)"
    >{{ item.preFileName }}</el-tag>

    <i class="el-icon-plus" @click="handleAdd"></i>

    <CommonSelect
      ref="CommonSelect"
      multiple
      :title="$t('sys.statistical_report')"
      :list="validList"/>
  </div>
</template>

<script>
import { postHmusergroupreport,deleteHmusergroupreport,getHmusergroupreportList,getHmusergroupreportSelectlist } from '@/apis/paas/HmUserGroupReportController.js'
import CommonSelect from '@/components/CommonSelect/CommonSelect'

export default {
  name: 'ReportVisibilityRange',
  components: {
    CommonSelect
  },

  data () {
    return {
      groupList: [], // 当前用户组的数据
      rangeList: [] // 当前用户组可选的数据
    }
  },

  created () {
    this.getGroupList()
  },

  computed: {
    validList () {
      // 当前用户组可选的数据 过滤已选数据
      const groupItemIds = this.groupList.map(item => item.reportId)
      return this.rangeList.filter(item => {
        item.id = item.reportId
        item.name = item.preFileName
        return !groupItemIds.includes(item.reportId)
      })
    }
  },

  methods: {

    getGroupList () {
      getHmusergroupreportList({
        groupId: this.$attrs.group.id
      }).then(res => {
        this.groupList = res
      })
    },

    handleAdd () {
      getHmusergroupreportSelectlist({
        groupId: this.$attrs.group.id
      }).then(res => {
        this.rangeList = res
      })

      this.$refs.CommonSelect.open(null, (data) => {
        postHmusergroupreport({
          groupId: this.$attrs.group.id,
          type: 1,
          reportIds: data
        }).then(res => {
        this.$message.success(this.$t('sys.operation_success'))
          this.getGroupList()
        })
      })
    },

    handleDelete (id) {
      deleteHmusergroupreport({ id }).then(res => {
        this.$message.success(this.$t('sys.operation_success'))
        this.getGroupList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  //border-bottom: 1px dashed #ccc;
}

.name-tag{
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-icon-plus{
  font-size: 18px;
  color: #409EFF;
  font-weight: bold;
  cursor: pointer;
}
</style>
